<template>
  <div>
    <div style="margin-top:20px" class="qup-title-box"><span class="border" />
      <span>{{ configType?'配图配置最终信息':'配图配置信息' }}</span>
    </div>
    <el-form
      ref="refForm"
      :model="formData"
      size="mini"
      label-width="150px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="业务类型:" size="mini" prop="businessType">
            {{ formData.businessType }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="定制面积:" prop="customizeArea">
            <el-input v-model.number="formData.customizeArea" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="橱柜面积:" prop="cabinetArea">
            <el-input v-model.number="formData.cabinetArea" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="回传外观时间:" prop="backFacadeTime">
            <el-input v-model="formData.backFacadeTime" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="定制自主设计占比:" prop="ownDesignPercent">
            <el-input v-model="formData.ownDesignPercent" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="备注:" prop="urgentRemark">
            <el-input v-model="formData.urgentRemark" disabled type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
      show-overflow-tooltip
      border
      show-summary
      :data="formData.autonomyDesignBusinessDTOList"
      style="width: 90%"
    >
      <el-table-column prop="bizType" label="业务类型" min-width="100" />
      <el-table-column prop="productNum" label="产品个数" min-width="100" />
      <el-table-column prop="autonomyDesignNum" label="自主设计数量" min-width="100" />
    </el-table>
    <c-file-table-box v-if="configType" v-model="shopAttachmentDTOList" :editable="false" :table-height="250" belong-model="SELF_DESIGN" :model-id="$route.query.id" />
  </div>
</template>
<script>
export default {
  name: 'ConfigInfo',
  props: {
    baseInfo: {
      type: Object,
      default: () => {}
    },
    configType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      formData: {},
      shopAttachmentDTOList: []
    }
  },
  watch: {
    baseInfo: {
      handler(v) {
        this.shopAttachmentDTOList = v.shopAttachmentDTOList || []
        if (v.drawingConfigDTOList && v.drawingConfigDTOList.length > 0) {
          const obj = v.drawingConfigDTOList.filter(v => v.configType === this.configType)
          if (obj.length > 0) {
            const { businessType, autonomyDesignBusinessDTOList, backFacadeTime, customizeArea, cabinetArea, ownDesignPercent, urgentRemark, autonomyDesignId, id, configType } = obj[0]
            this.formData = { businessType, autonomyDesignBusinessDTOList, backFacadeTime, customizeArea, cabinetArea, ownDesignPercent, urgentRemark, autonomyDesignId, id, configType }
          } else {
            this.formData = { autonomyDesignBusinessDTOList: [],
              backFacadeTime: '',
              customizeArea: '',
              cabinetArea: '',
              ownDesignPercent: '',
              urgent: '',
              urgentRemark: '',
              autonomyDesignId: '',
              businessType: '',
              configType: 0 }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  async created() {
    // const { SLM_BUSINESS_TYPE } = await getDictByPatchType(['SLM_BUSINESS_TYPE'])
    // this.businessTypeList = SLM_BUSINESS_TYPE
  },
  methods: {

  }
}
</script>
